<template>
  <div class="admin-makeup-exam-manage">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>全校补考申请总览</span>
          <el-input v-model="searchQuery" placeholder="搜索学生/课程" style="width: 250px; margin-left: 20px" clearable />
        </div>
      </template>
      <el-table :data="filteredApplications" style="width: 100%" v-loading="loading">
        <el-table-column prop="studentId" label="学号" width="120" />
        <el-table-column prop="studentName" label="学生姓名" width="120" />
        <el-table-column prop="courseId" label="课程ID" width="100" />
        <el-table-column prop="courseName" label="课程名称" width="150" />
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="statusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="applyTime" label="申请时间" width="180">
          <template #default="scope">{{ formatDate(scope.row.applyTime) }}</template>
        </el-table-column>
        <el-table-column prop="reviewTime" label="审核时间" width="180">
          <template #default="scope">{{ formatDate(scope.row.reviewTime) }}</template>
        </el-table-column>
        <el-table-column prop="makeupScore" label="补考成绩" width="120" />
        <el-table-column prop="remark" label="备注" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

export default {
  name: 'AdminMakeupExamManage',
  setup() {
    const applications = ref([])
    const loading = ref(false)
    const searchQuery = ref('')
    
    const fetchApplications = async () => {
      loading.value = true
      try {
        const res = await axios.get('/api/makeup-exam/admin')
        const data = res.data || []
        
        // 获取学生和课程信息
        const enrichedData = await Promise.all(data.map(async (app) => {
          try {
            // 获取课程信息和学生信息
            const courseRes = await axios.get(`/api/courses/${app.courseId}`)
            const studentRes = await axios.get(`/api/users/${app.studentId}`)
            
            return {
              ...app,
              courseName: courseRes.data?.name || '未知课程',
              studentName: studentRes.data?.realName || '未知学生'
            }
          } catch (e) {
            return {
              ...app,
              courseName: '未知课程',
              studentName: '未知学生'
            }
          }
        }))
        
        applications.value = enrichedData
      } catch (e) {
        console.error('获取补考申请失败', e)
        ElMessage.error('获取补考申请失败')
      } finally {
        loading.value = false
      }
    }
    
    const filteredApplications = computed(() => {
      if (!searchQuery.value) return applications.value
      const q = searchQuery.value.toLowerCase()
      return applications.value.filter(app =>
        (app.studentId && app.studentId.toLowerCase().includes(q)) ||
        (app.studentName && app.studentName.toLowerCase().includes(q)) ||
        (app.courseId && app.courseId.toLowerCase().includes(q)) ||
        (app.courseName && app.courseName.toLowerCase().includes(q))
      )
    })
    
    const statusTagType = (status) => {
      if (status === '补考通过') return 'success'
      if (status === '补考未通过') return 'danger'
      if (status === '待审核') return 'warning'
      if (status === '已批准') return 'info'
      return ''
    }
    
    const formatDate = (dateStr) => {
      if (!dateStr) return ''
      const d = new Date(dateStr)
      return `${d.getFullYear()}/${d.getMonth()+1}/${d.getDate()} ${d.getHours().toString().padStart(2,'0')}:${d.getMinutes().toString().padStart(2,'0')}`
    }
    
    let timer = null
    onMounted(() => {
      fetchApplications()
      // 定时轮询刷新
      timer = setInterval(() => {
        fetchApplications()
      }, 5000)
    })
    onUnmounted(() => {
      if (timer) clearInterval(timer)
    })
    
    return {
      applications,
      loading,
      searchQuery,
      filteredApplications,
      statusTagType,
      formatDate
    }
  }
}
</script>

<style scoped>
.admin-makeup-exam-manage {
  margin: 20px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
</style> 